<template>
	
	
	<view class="content">
		
		<view class="me_title">
			<view class="left">
				<image @click="upload" :src="siteUrl+userInfo.avatar"></image>
			</view>
			<view class="right">
				<view class="me_name">
					{{userInfo.nickname}}
				</view>
				<view class="phoneNum">
					<view class="icon_phone">
						<image src="../../static/icon/Subtract.png" mode=""></image>
					</view>
					<view class="num">
						{{userInfo.mobile}}
					</view>
				</view>
			</view>
			<view class="Popular">
				<navigator v-for="(item,index) in popList" :key="index" :url="item.url"  hover-class="navigator-hover">
				<view class="popItem" >
					<image :src=item.pic mode=""></image>
					<view class="poptext">
						{{item.text}}
					</view>
				</view>
				</navigator>
			</view>
		</view>
		<view class="my">
			<view class="bg1">
				<image src="../../static/img/bg1.png" mode=""></image>
			</view>
			<view class="manage">
				<view class="manage_title">
					人脉管理
				</view>
				<view class="manageList">
					<navigator v-for="(item,index) in manageList" :key="index"  :url="item.url"  hover-class="navigator-hover">
					<view class="mange_item" >
						<image :src=item.pic mode=""></image>
						<view class="manage_text">
							{{item.text}}
						</view>
					</view>
					</navigator>
					
				</view>
			</view>
			
			<view class="myList">
				<view class="my_item" v-for="(item,index) in myLists" :key="index">					
					<view class="left">
						<image :src=item.pic mode=""></image>
						<view class="text">
							{{item.text}}
						</view>
					</view>
					<view class="right">
						<image src="../../static/icon/arrow.png" mode=""></image>
					</view>
				</view>	
				
				<view class="my_item" @click="loginout">					
					<view class="left">
						<image src="../../static/icon/icon-14.png" mode=""></image>
						<view class="text">
							退出登录
						</view>
					</view>
					<view class="right">
						<image src="../../static/icon/arrow.png" mode=""></image>
					</view>										
				</view>	
						
						
					
						
						
			</view>
					
					
				
		</view>
		
		
	</view>
</template>

<script>
	var _self;
	
	
	export default{
		
		data(){
			return{
				siteUrl:this.websiteUrl,
				token:'',
				portrait:'../../static/img/portrait.png',
				myName:'曾丽丽',
				userInfo:[],
				popList:[
					{
						pic:'../../static/img/portrait.png',
						text:'我的房源',
						url:'../index/mine'
					},
					{
						pic:'../../static/img/portrait.png',
						text:'我的成交',
						url:'../me/content/deal'
					},
					{
						pic:'../../static/img/portrait.png',
						text:'看房记录',
						url:'../addressList/content/reserveRecode'
					}
				],
				manageList:[
					{
						pic:'../../static/icon/manage1.png',
						text:'我的租客'
					},
					{
						pic:'../../static/icon/manage2.png',
						text:'我的房东',
						url:'../addressList/addressList'
					},
					{
						pic:'../../static/icon/manage1.png',
						text:'通讯录',
						url:'../addressList/addressList'
					
					},
					{
						pic:'../../static/icon/manage2.png',
						text:'宜家客服',
						url:'../me/shangqiao'
					}
				],
				myLists:[
					{
						pic:'../../static/icon/icon-11.png',
						text:'公众号'
					},
					{
						pic:'../../static/icon/icon-12.png',
						text:'二维码页'
					},
					{
						pic:'../../static/icon/icon-13.png',
						text:'关于'
					},
					{
						pic:'../../static/icon/icon-14.png',
						text:'设置'
					}
					
				]
			}
		},
		onLoad(){
			_self = this
			this.token = this.checkLogin();
			
			this.getuserInfo()
			
		},
		onReady() {
		       
		},		 
		methods:{
			loginout(){				
				uni.showModal({
				    title: '提示',
				    content: '确定退出吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.clearStorageSync();
							
							uni.reLaunch({
								url:"/pages/login/login"
							})				            							
				        } else if (res.cancel) {
											            												
				        }
				    }
				});				
			},
			getuserInfo(){
				uni.request({
					url: this.websiteUrl+'/api.php/center/userInfo',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {token:this.token},
					success: function(res){						
						if(res.data.code == 1){
							_self.userInfo = res.data.data							
						}
					},				
				});
			},
			upload(){
			   _self = this			 
			   uni.chooseImage({
			       success: function(chooseImageRes) {
			           const tempFilePaths = chooseImageRes.tempFilePaths;					  
										   uni.uploadFile({											
											   url: 'http://api.yjzufang.com/api.php/center/upload', //仅为示例，非真实的接口地址
											   filePath: tempFilePaths[0],
											   name: 'file',											
											   success: function(res){											  
												   var re = JSON.parse(res.data);												  
												   if(re.code == 1){
													   uni.request({
													   	url: 'http://api.yjzufang.com/api.php/center/avatarEdit',
													   	method: 'POST',
														header: {
															'content-type':'application/x-www-form-urlencoded',						
														},
													   	data: {
															token:_self.token,
															avatar:re.data															
														},
													   	success: function(result) {															
															if(result.data.code == 1){
																_self.userInfo.avatar = result.data.data
															}														
														},													   	
													   });
													   
												   }												   
										   }
									   })
						}
			   });
			}
		}
				  
	}
</script>

<style>
	.web{width:50rpx;height: 50rpx;}
	.tan{width:50rpx;height: 50rpx;}
	web-view{width: 50rpx;height: 50rpx;}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #4F5861;
	}
	.me_title{
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 95%;
		height: 130upx;
		margin: 100upx 0;
		
	}
	.me_title .left{
		width: 130upx;
		height: 130upx;
	}
	.me_title .left image{
		width: 100%;
		height: 100%;
		border-radius:50%
	}
	.me_title .right{
		width: 520upx;
	}
	.me_title .right .me_name{
		color: white;
		font-size: 48upx;
		line-height: 60upx;
	}
	.me_title .right .phoneNum{
		display: flex;
		height: 36upx;
	}
	.me_title .right .icon_phone{
		width: 20upx;
		height: 22upx;
	}
	.me_title .right .icon_phone image{
		width: 100%;
		height: 100%;
	}
	.me_title .right .phoneNum .num{
		padding: 0 10upx;
		color: white;
		font-size: 24upx;
		line-height: 54upx;
	}
	.Popular{
		position: absolute;
		left: 9rpx;
		bottom: -200upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 694rpx;
		height: 180upx;
		background: white;
		border-radius: 20upx;
	}
	.Popular .popItem{
		width: 100upx;
		height: 120upx;
		text-align: center;
	}
	.Popular .popItem image{
		width: 70upx;
		height: 70upx;
		margin: 0 auto; 
	}
	.Popular .popItem .poptext{
		font-size: 24upx;
		line-height: 36upx;
	}
	.my{
		width: 100%;
		background: #F8F8FA;
	}
	.bg1{
		width: 700upx;
		height: 155upx;
		margin: 110upx auto 20upx;
	}
	.bg1 image{
		width: 100%;
		height: 100%;
	}
	.manage{
		overflow: hidden;
		width: 700upx;
		height: 240upx;
		margin: 20upx auto;
		background: white;
		border-radius: 20upx;
	}
	.manage_title{
		margin: 30upx 0 40upx 30upx;
		font-size: 30upx;
	}
	.manageList{
		display: flex;
		justify-content: space-around;
	}
	.mange_item{
		text-align: center;
	}
	.mange_item image{
		width: 50upx;
		height: 50upx;
	}
	.mange_item .manage_text{
		font-size: 24upx;
		line-height: 34upx;
		margin-top: 20upx;
	}
	.myList{
		width: 700upx;
		margin: 20upx auto 0;
	}
	.my_item{
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
		height: 110upx;
		background: white;
		border-radius: 20upx;
	}
	.my_item .left{
		display: flex;
		width: 50%;
		line-height: 110upx;
	}
	.my_item .left image{
		margin: 30upx 0 0;
		width: 50upx;
		height: 50upx;
	}
	.my_item .left .text{
		padding-left: 20upx;
		font-size: 30upx;
	}
	.my_item .right{
		width: 5%;
	}
	.my_item .right image{
		margin-top: 40upx;
		width: 13upx;
		height: 26upx;
	}
</style>
